<template>
  <div class="ui-button-group">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'UiButtonGroup'
}
</script>
<style lang="less">
.ui-button-group{
  .el-button.ui-button{
    margin-left: -1px;
    margin-right: 0;
    position: relative;
    &:first-child:not(:last-child){
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:last-child:not(:first-child){
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:not(:first-child):not(:last-child){
      border-radius: 0;
    }
    &:hover,&:focus{
      z-index: 3;
    }
  }
  .el-dropdown{
    .ui-dropdown__handle {
      margin-left: -1px;
    }
    &:not(:first-child):not(:last-child){
      .ui-dropdown__handle .el-button{
        border-radius: 0;
      }
    }
    &:first-child:not(:last-child){
      .ui-dropdown__handle .el-button {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
    &:last-child:not(:first-child){
      .ui-dropdown__handle .el-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}
</style>
